 <script setup lang="ts">
    
</script>

<template>
    <div style="display: flex; flex-direction: column;">
        <div style="display: flex; justify-content: end; width: 100%;">
            <div class="rlinkDiv">
            <router-link to="/publishArticle/markDownEditor" class="rlink" activeClass="router-link-active">
                <div class="line"><span class="spanStyle">MarkDown编辑器</span></div>
            </router-link>
            <!-- <router-link to="/publishArticle/RichTextEditor" class="rlink" activeClass="router-link-active">
                <div class="line"><span class="spanStyle">富文本编辑器</span></div>
            </router-link> -->
            </div>
        </div>
        <RouterView/>
    </div>
</template>

<style scoped>
    .rlinkDiv{
    text-decoration: none;
    height: 100%;
    width: 40%;
    margin: 0 5px;
    align-items: center;
    justify-content: center;
    display: flex;
  }
  .rlink{
    text-decoration: none;
    height: 100%;
    margin: 0 5px;
    align-items: center;
    justify-content: center;
    display: flex;
    color: black;
  }
  .rlink:hover{
    color: rgb(42, 125, 214);
  }
  .rlink:active {
    color: rgb(42, 125, 214);
  }
  .rlink.router-link-active{
    color: rgb(42, 125, 214);
    outline: 2px solid rgb(128, 183, 242);
    box-shadow: 0 3px 3px rgb(42, 125, 214);
  }
  .line{
    display: flex;
    align-items: center;
     justify-content: center;
  }
  .spanStyle{
    padding: 6px 0px;
  }
</style>